<template>
  <div class="section-container">
    <div class="section-title">
      登录日志
    </div>
    <div class="table-box">
      <RuifoxTable :loading="tableLoading" :default-index="true" :default-checkbox="false" v-model:tableData="tableData" v-model:fieldList="fieldList">
        <template #loginTime="{ element }">
          <span>{{ dayjs(element.loginTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
        <template #status="{ element }">
          <span>{{ element.status === 1 ? '登录成功' : '登录失败' }}</span>
        </template>
      </RuifoxTable>
      <div class="header-page">
        <PaginationView
          :total="queryData.total"
          :pageSize="queryData.pageSize"
          :currentPage="queryData.currentPage"
          :canChoose="false"
          @currentChange="handleCurrentChange"
          @changeSize="handleSizeChange"
          @refreshList="getTableData"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { selectLoginLogPage } from '@/api/logs'
import dayjs from 'dayjs'
import { tableList as mixTable } from '@ruifox-cms/utils'

// 使用mixTable混入
const { queryData, tableData, tableLoading, getTableData, handleSearch, handleCurrentChange, handleSizeChange } = mixTable({
  getListApi: selectLoginLogPage
})

// 表格字段配置
const fieldList = ref([
  {
    title: '操作用户',
    name: 'account'
  },
  {
    title: 'IP地址',
    name: 'ip'
  },
  {
    title: '状态',
    name: 'status'
  },
  {
    title: '操作时间',
    name: 'loginTime'
  }
])

// 搜索条件配置
const defaultQueryData = reactive({
  account: '',
  startTime: '',
  endTime: ''
})
Object.assign(queryData, defaultQueryData)

onMounted(() => {
  handleSearch()
})
</script>

<style scoped lang="scss">

</style>
